<template>
  <div>
    <el-dialog class="form-dialog" width="800px" :title="title" :visible.sync="visible">
      <el-form
        ref="form"
        size="small"
        style="max-height: 520px; overflow: auto; padding-bottom: 30px"
        label-width="100px"
        :model="form"
      >
        <el-form-item label="邮箱" prop="contactEmail">
          <el-input
            v-model="form.ownerSetting.contactEmail"
            type="text"
            placeholder="信息收集方(开发者)的邮箱地址，4种联系方式至少要填一种"
          />
        </el-form-item>
        <el-form-item label="手机号" prop="contactPhone">
          <el-input
            v-model="form.ownerSetting.contactPhone"
            type="text"
            placeholder="信息收集方(开发者)的手机号，4种联系方式至少要填一种"
          />
        </el-form-item>
        <el-form-item label="QQ号" prop="contactQQ">
          <el-input
            v-model="form.ownerSetting.contactQQ"
            type="text"
            placeholder="信息收集方(开发者)的QQ号，4种联系方式至少要填一种"
          />
        </el-form-item>
        <el-form-item label="微信号" prop="contactWeixin">
          <el-input
            v-model="form.ownerSetting.contactWeixin"
            type="text"
            placeholder="信息收集方(开发者)的微信号，4种联系方式至少要填一种"
          />
        </el-form-item>
        <el-form-item label="通知方式" :rules="rules.noticeMethod" prop="ownerSetting.noticeMethod">
          <el-input v-model="form.ownerSetting.noticeMethod" type="text" placeholder="指的是当开发者收集信息有变动时，通过该方式通知用户" />
        </el-form-item>
        <el-form-item v-if="privacySettingDetail && privacySettingDetail.privacyDesc" label="收集信息">
          <div v-for="(item, index) in form.settingList" :key="index">
            <el-form-item
              :prop="'settingList.' + index + '.privacyKey'"
              :rules="rules.privacyKey"
              style="display: inline-block"
            >
              <el-select v-model="item.privacyKey" placeholder="请选择" style="width: 260px">
                <el-option
                  v-for="privacy in privacySettingDetail.privacyDesc.privacyDescList"
                  :key="privacy.privacyKey"
                  :label="privacy.privacyDesc"
                  :value="privacy.privacyKey"
                />
              </el-select>
            </el-form-item>
            <el-form-item
              :prop="'settingList.' + index + '.privacyText'"
              :rules="rules.privacyText"
              style="display: inline-block"
            >
              <el-input
                v-model.trim="item.privacyText"
                placeholder="收集该信息的用途"
                style="width: 260px"
                maxlength="250"
              />
            </el-form-item>
            <el-button
              type="text"
              icon="el-icon-delete"
              style="height: 32px;margin-left: 10px; color: #F56C6C"
              @click="delPrivacy(index)"
            />
          </div>
          <el-button
            type="primary"
            round
            icon="el-icon-plus"
            style="height: 32px"
            @click="addPrivacy"
          >添加收集信息配置
          </el-button>
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="close">取 消</el-button>
        <el-button type="primary" :loading="loading" @click="handleSave">确 定</el-button>
      </div>
    </el-dialog>
  </div>

</template>

<script>
import { setPrivacySetting } from '@/api/wxapp'

export default {
  name: 'FormDialog',
  props: {},
  data() {
    return {
      loading: false,
      visible: false,
      title: '隐私条款',
      mode: '',
      options: [],
      optionValue: [],
      reject: null,
      resolve: null,
      permId: null,
      appId: '',
      privacySettingDetail: {},
      form: {
        ownerSetting: {
          contactEmail: '',
          contactPhone: '',
          contactQQ: '',
          contactWeixin: null,
          noticeMethod: '小程序弹窗'
        },
        settingList: [{
          privacyKey: '',
          privacyText: ''
        }]
      },
      rules: {
        noticeMethod: [{
          required: true,
          message: '请填写条款变更通知方式',
          trigger: 'blur'
        }],
        privacyKey: [{
          required: true,
          message: '请选择收集的信息',
          trigger: 'blur'
        }],
        privacyText: [{
          required: true,
          message: '请填写收集该信息的用途',
          trigger: 'blur'
        }]
      }
    }
  },
  methods: {
    defaultForm() {
      return {
        ownerSetting: {
          contactEmail: '',
          contactPhone: '',
          contactQQ: '',
          contactWeixin: null,
          noticeMethod: '小程序弹窗'
        },
        settingList: [{
          privacyKey: '',
          privacyText: ''
        }]
      }
    },
    addPrivacy() {
      this.form.settingList.push({
        privacyKey: '',
        privacyText: ''
      })
    },
    delPrivacy(index) {
      this.form.settingList.splice(index, 1)
    },
    open(appId, privacySettingDetail) {
      this.appId = appId
      this.privacySettingDetail = privacySettingDetail
      const form = this.defaultForm()
      form.ownerSetting = JSON.parse(JSON.stringify(privacySettingDetail.ownerSetting))
      if (!form.ownerSetting.noticeMethod) {
        form.ownerSetting.noticeMethod = '小程序弹窗'
      }
      if (privacySettingDetail.settingList) {
        form.settingList = privacySettingDetail.settingList
      }
      this.form = form
      return new Promise((resolve, reject) => {
        this.resolve = resolve
        this.reject = reject
        this.visible = true
      })
    },
    close() {
      this.visible = false
      this.resolve = null
      this.reject = null
      this.$refs.form.resetFields()
    },
    handleSave() {
      this.$refs.form.validate(valid => {
        console.info('valid', valid)
        if (!valid) {
          return
        }
        const ownerSetting = this.form.ownerSetting
        const hasContact = ownerSetting.contactEmail || ownerSetting.contactPhone || ownerSetting.contactQQ || ownerSetting.contactWeixin
        if (!hasContact) {
          this.$message.warning('请填写联系方式')
          return
        }
        if (!this.form.settingList || this.form.settingList.length <= 0) {
          this.$message.warning('请填写需要获取的用户信息')
          return
        }
        this.loading = true
        setPrivacySetting(this.appId, this.form).then(res => {
          this.loading = false
          if (res.code === 0) {
            this.$notify({ title: '成功', message: '修改成功', type: 'success', duration: 2000 })
            this.resolve && this.resolve()
            this.close()
          }
        }).catch(() => {
          this.loading = false
        })
        console.info('form', this.form)
      })
    }
  }
}
</script>

